
 <template>
  <div class="box">
    <FloatingBall ref="floatingBallRef" />
    <van-nav-bar title="我的" left-text="返回" left-arrow @click-left="onClickLeft" />
    <header style="position: relative;">
      
      <!-- 头像框 -->
      <div class="avatar-frame" style="margin-top:.4rem">
        <img v-lazy="imgage" @click="Jumpaccountset" class="avatar" style="width: 100%; height: 100%;border-radius: 50%;">
        <h2 class="h2">{{ user }}</h2>
        <button class="one">兑换会员</button>
        <button class="two" style="margin-left:.2rem">常用就诊人(1)</button>
        <button class="three" style="margin-left:.2rem">就诊人病例管理</button>
      </div>
      <van-icon @click="change" name="setting-o"
        style="position: absolute;right: 0.1rem;top: 0.1rem;font-size: .3rem;" />
    </header>
    <main>
      <div class="img">
        <img src="../../image/img.png" alt="">
      </div>
      <img src="../../image/21.png" alt="" style="position: absolute;
      top: 1rem;left: 1.5rem;">
      <!-- 宫格列表 -->
      <div class="grid" style="position: relative;border-radius: .1rem;background: #f3f8ff;">
        <H4>我的订单</H4>
        <van-grid class="grid-item">
          <van-grid-item icon="chat-o" text="问诊" />
          <van-grid-item icon="notes-o" text="处方" />
          <van-grid-item icon="font-o" text="药店" />
          <van-grid-item icon="apps-o" text="其他" />
        </van-grid>
        <p style="width:100%;height:.3rem;line-height:.3rem;text-align: center;">
          <span @click="gohealthyDetails"
            style="margin-left: .4rem;margin-top: .15rem;">健康币&ensp;<b>10</b>&emsp;&emsp;></span>
          <span @click="gocoupon" style="margin-left: .8rem;margin-top: .15rem;">优惠券&ensp;<b>1</b>&emsp;></span>
        </p>
        <img src="../../image/31.png" alt=""
          style="position: absolute;top: 1.2rem;left: .9rem;width: .6rem;height: .25rem;">
        <img src="../../image/32.png" alt="" style="position: absolute;top: 1.46rem;left: .1rem;">
        <img src="../../image/33.png" alt="" style="position: absolute;top: 1.46rem;left: 1.9rem;">
      </div>
      <div class="register">
        <span
          style="margin-left: .5rem;margin-top: .1rem;">我的挂号</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>></span>
        <img src="../../image/34.png" alt="" style="position: absolute;top: 0.15rem;left: .1rem;">
      </div>
      <div class="money" @click="gomoney">
        <span
          style="margin-left: .5rem;margin-top: .1rem;">我的钱包</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>></span>
        <img src="../../image/money.png" alt="" style="position: absolute;top: 0.15rem;left: .1rem;">
      </div>
      <div class="settle" @click="gosettle">
        <span
          style="margin-left: .5rem;margin-top: .1rem;">商家入驻</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>></span>
          <img src="../../image/a39..png" alt="" style="position: absolute;top: 0.15rem;left: .1rem;width: .3rem;height: .3rem;">
        </div>
      <div class="doctor">
        <div class="my-doctor">
          <h4 style="">我的医生</h4>
          <span style="color: #ccc;font-size: .15rem;">一键在线复诊</span>
          <img src="../../image/35.png" alt="" style="position: absolute;top: .2rem;left: .15rem;">
        </div>
        <div class="vip">
          <h4 style="">会员中心</h4>
          <span style="color: #ccc;font-size: .15rem;">一键在线复诊</span>
          <img src="../../image/36.png" alt="" style="position: absolute;top: .2rem;left: .15rem;">
        </div>
      </div>
      <div class="icon">
        <h4>服务与工具</h4>
        <van-grid class="grid-item2" style="position: relative;">
          <van-grid-item icon="star-o" text="收藏" @click="router.push('/collect')" />
          <van-grid-item icon="friends-o" text="我的医生" />
          <van-grid-item icon="orders-o" text="随访计划" />
          <van-grid-item icon="contact-o" text="客服中心" @click="router.push('/customer')"/>
        </van-grid>
        <img src="../../image/22.png" alt="" style="position: absolute;left: .25rem;top: -4.8rem;">
        <img src="../../image/23.png" alt="" style="position: absolute;left: 1.15rem;top: -4.8rem;">
        <img src="../../image/24.png" alt="" style="position: absolute;left: 2.05rem;top: -4.8rem;">
        <img src="../../image/25.png" alt="" style="position: absolute;left: 2.9rem;top: -4.8rem;">
      </div>
    </main>
    <footer></footer>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref } from 'vue'
import { showImagePreview } from 'vant';
import { watch } from 'vue'
import FloatingBall from '../components/FloatingBall.vue'; // 引入悬浮球组件

const router = useRouter();
const imgage = ref(localStorage.getItem('img'));
const user = ref(localStorage.getItem('user'));
const floatingBallRef = ref<InstanceType<typeof FloatingBall>>(); // 获取悬浮球组件实例的引用

// 图片预览 
const Jumpaccountset = () => {
  showImagePreview([
    localStorage.getItem('img')
  ]);
}
// 其他原有函数保持不变

// 监听悬浮球组件的位置变化，更新其在页面中的样式位置
watch(() => floatingBallRef.value?.ballPosition, (newPosition) => {
  if (newPosition) {
    const floatingBallEl = floatingBallRef.value?.$el as HTMLElement;
    if (floatingBallEl) {
      floatingBallEl.style.left = `${newPosition.x}px`;
      floatingBallEl.style.top = `${newPosition.y}px`;
    }
  }
}, { immediate: true });
const change = () => {
  router.push('/set')
}
const gocoupon = () => {
  router.push('/coupon')
}
const gohealthyDetails = () => {
  router.push('/healthyDetails')
}
// 跳转到钱包页
const gomoney = () => {
  router.push('/money')
}
// 跳转到商家入驻页
const gosettle = () => {
  router.push('/settle')
}
const onClickLeft = () => {
  router.push('/home/home')
};

</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  display: flex;
  background: #f7f7f7;
  flex-direction: column;

  header {
    width: 100%;
    height: 1.5rem;
    background: #eaf2ff;
    text-align: center;
  }

  main {
    flex: 1;
    overflow: auto;
  }

  footer {
    width: 100%;
    height: 1.2rem;
  }
}

.avatar-frame {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 0.02rem solid #ccc;
  background: rgba(0, 0, 0, .5);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
}

h2 {
  position: absolute;
  left: 1rem;
  top: 0.4rem;
}

/* 兑换会员按钮位置 */
.one{
    width: 1rem;
    height: 0.3rem;
    position: absolute;
    right: 0.5rem;
    top: 0.1rem;
    border-radius: 10rem;
    border: none;
    border: 0.01rem solid #ccc;
    background: #ffff;
}

/* 常用就诊人按钮位置 */
.two {
  width: 1rem;
  height: 0.3rem;
  position: absolute;
  font-size: 0.11rem;
  background: #eaf2ff;
  left: 0.75rem;
  top: .85rem;
  border-radius: 10rem;
  border: 0.01rem solid #000;
}

/* 就诊人病历管理按钮位置 */
.three {
  width: 1rem;
  height: 0.3rem;
  font-size: 0.11rem;
  position: absolute;
  left: 1.76rem;
  top: .85rem;
  border-radius: 10rem;
  border: 0.01rem solid #000;
  background: #eaf2ff;
}

.img {
  width: 100%;
  height: 1.5rem;
  // margin-top: .25rem;

  img {
    width: 100%;
    height: 100%;
  }
}

/* 宫格列表 */
h4 {
  float: left;
  margin-top: .15rem;
  margin-left: .05rem;
}

.grid {
  width: 3.5rem;
  height: 1.6rem;
  margin-top: .15rem;
  margin-left: .1rem;
  position: relative;
  background: #fafafa;
}

.grid-item {
  width: 100%;
  position: absolute;
  top: .5rem;
}

p {
  position: absolute;
  bottom: 0;

  span {
    float: left;
    margin-left: .3rem;
  }
}

.register {
  width: 3.5rem;
  height: 0.55rem;
  background: #f5f9ff;
  margin-left: .1rem;
  line-height: .55rem;
  font-size: .15rem;
  margin-top: .2rem;
  border-radius: .1rem;
  position: relative;
}

.money {
  width: 3.5rem;
  height: 0.55rem;
  background: #f5f9ff;
  margin-left: .1rem;
  line-height: .55rem;
  font-size: .15rem;
  margin-top: .2rem;
  border-radius: .1rem;
  position: relative;
}
.settle {
  width: 3.5rem;
  height: 0.55rem;
  background: #f5f9ff;
  margin-left: .1rem;
  line-height: .55rem;
  font-size: .15rem;
  margin-top: .2rem;
  border-radius: .1rem;
  position: relative;
}
.money img {
  width: 0.25rem;
  height: 0.25rem;
}

.doctor {
  width: 100%;
  height: 1rem;
  background: #f4f5f7;
  margin-top: .25rem;
}

.my-doctor h4 {
  position: absolute;
  left: .7rem;
  bottom: .5rem;
}

.my-doctor span {
  position: absolute;
  left: .7rem;
  bottom: .3rem;
}

.doctor .vip h4 {
  position: absolute;
  left: .7rem;
  bottom: .5rem;
}

.doctor .vip span {
  position: absolute;
  left: .7rem;
  bottom: .3rem;
}

.my-doctor {
  width: 1.7rem;
  height: 1rem;
  background: #f5faff;
  border-radius: .2rem;
  margin-left: .1rem;
  float: left;
  position: relative;
}

.vip {
  width: 1.7rem;
  height: 1rem;
  background: #f5faff;
  border-radius: .1rem;
  margin-right: .2rem;
  float: right;
  position: relative;
}

.icon {
  width: 3.5rem;
  height: 1.3rem;
  background: #fff;
  position: relative;
  margin-top: .3rem;
  margin-left: .1rem;
  border-radius: .2rem;
}

.icon h4 {
  margin-left: .2rem;
}

.grid-item2 {
  width: 100%;
  position: absolute;
  top: .05rem;
}

.avatar {
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  object-fit: cover;
}

h2 {
  font-size: 0.12rem;
  margin-top: 0.13rem;
}
.floating-ball {
  z-index: 999;
}
</style>
